<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="sp" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@include file="../base_path.jsp" %>

<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="description" content="">

    <link rel="stylesheet" type="text/css" href="<%=basePath%>/lib/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen"
          href="<%=basePath%>/lib/jqgrid/5.2.1/css/ui.jqgrid-bootstrap.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/lib/lobibox/css/lobibox.min.css"/>

    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/css/mycss.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>/css/pageNav.css"/>

    <title>任务详细</title>
<style type="text/css">
	.aphone {
		border: 1px solid #e1e1e1;
		width: 500px;
		height: 390px;
		margin-bottom: 20px;
		border-top: none;
		border-bottom-width: 5px;
		background: #FFFFFF;
		position: relative;
	}

	.task-end {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		background: rgba(61, 61, 61, 0.5);
		z-index: 111;
		display: none;
		text-align: center;
		line-height: 390px;
		color: #FFF;
	}

	.detail-left {
		width: 700px;
		float: left;
		border-right: 1px solid #DDD;
	}

	.detail-right {
		width: 398px;
		float: left;
	}

	.htext {
		position: fixed;
		top: -5000px;
	}

	.phone-head {
		height: 35px;
		background: #eff1f7;
	}

	.phone-head .phone-time {
		height: 35px;
		display: inline-block;
		background: #38d672;
		line-height: 35px;
		width: 60px;
		color: #FFF;
		text-align: center;
	}

	.no-phone .phone-head .phone-time {
		background: #F00;
	}

	.phone-main {
		height: 359px;
		overflow: hidden;
		padding: 10px;
	}

	.smaller-div {
		width: 110%;
		margin-left: -5%;
		transform: scale(0.9, 0.9);
		-webkit-transform: scale(0.9, 0.9);
		-moz-transform: scale(0.9, 0.9);
		-o-transform: scale(0.9, 0.9);
		background: #eff1f7;
	}

	#wave_detail {
		width: 668px;
		height: 120px;
		background: #002138;
	}

	wave {
		background: #002138;
	}

	.wave {
		background: #002138;
	}

	#myModal .modal-body {
		padding-top: 0;
	}

	.detail-head {
		padding: 10px 0px;
		border-bottom: 1px solid #DDD;
		margin: 0;
	}

	.detail-head .close {
		line-height: 16px;
	}

	.detail-head .detail-title {
		font-size: 16px;
		font-weight: 600;
		line-height: 22px;
	}

	.detail-head .detail-status {
		font-size: 16px;
		font-weight: 600;
		margin-left: 15px;
		line-height: 22px;
	}

	.detail-head .detail-status.duration {
		color: rgb(137, 194, 76)
	}

	.detail-head button {
		margin-right: 10px;
	}

	.marginlr-0 {
		margin-left: 0;
		margin-right: 0;
	}

	.workbench-box {
		height: 670px;
	}

	.padding-0 {
		padding: 0;
	}

	.intention-title {
		font-weight: 600;
		font-size: 14px;
	}

	.intention-button .btn {
		width: 100%;
	}

	.intention-button .btn:hover {
		background-color: #5cb85c
	}

	.intention-row-active .intention-button .btn {
		background-color: #5cb85c
	}

	.intention-row-first .rank {
		background-color: #5cb85c
	}

	.rank {
		font-size: 12px;
		text-align: center;
		line-height: 20px;
		width: 22px;
		height: 22px;
		border: 1px solid #CCCCCC;
		display: inline-block;
		border-radius: 50%;
	}

	.message-face img {
		width: 28px;
		height: 28px;
		border-radius: 50%;
		/* background: #DDDDDD; */
	}

	.message-text {
		padding-top: 5px;
		padding-bottom: 5px;
		position: relative;
	}

	.robot-message .message-text {
		background: #d2d6de;
		border-radius: 5px;
		line-height: 18px;
		font-size: 12px;
		position: relative;
	}

	.robot-message .message-text::after {
		content: "";
		width: 15px;
		height: 15px;
		position: absolute;
		left: -3px;
		top: 7px;
		background: #d2d6de;
		transform: rotateZ(45deg);
		transform-origin: center;
		z-index: 11;
	}

	.user-message .message-text {
		background: #3c8dbc;
		border-radius: 5px;
		line-height: 18px;
		font-size: 12px;
		position: relative;
		color: #FFF;
		background: #c9d8f8;
		border-color: #c9d8f8;
		color: #3273fa;
	}

	.user-message .message-text::after {
		content: "";
		width: 15px;
		height: 15px;
		position: absolute;
		right: -3px;
		top: 7px;
		background: #c9d8f8;
		transform: rotateZ(45deg);
		transform-origin: center;
		z-index: 11;
	}

	.direct-chat-messages {
		overflow-x: hidden;
	}

	.margin-bottom-0 {
		margin-bottom: 0;
	}

	.query-condition label {
		line-height: 30px;
	}


	.aui-switch:checked {

		border-color: rgb(0, 224, 104);
		background-color: rgb(0, 224, 104);
	}

	.aui-switch {
		width: 60px;
		height: 28px;
		position: relative;
		vertical-align: top;
		border: 1px solid #dddddd;
		background-color: #dddddd;
		border-radius: 15px;
		background-clip: content-box;
		display: inline-block;
		outline: none;
		-webkit-appearance: none;
		appearance: none;
		-webkit-user-select: none;
		user-select: none;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-background-clip: padding-box;
		background-clip: padding-box;
		-webkit-transition: all 0.2s linear;
		transition: all 0.2s linear;
		outline-style: none;
		outline: none !important;
	}

	.aui-switch:checked:before {
		left: 32px;
	}

	.aui-switch:before {
		width: 24px;
		height: 24px;
		position: absolute;
		top: 1px;
		left: 0;
		border-radius: 12px;
		background-color: #fff;
		content: '';
		-webkit-transition: left 0.2s;
		transition: left 0.2s;
	}

	.margin-top-0 {
		margin-top: 0px !important;
	}

	.phone-head .btn {
		outline: none !important;
	}

	.phone-head .btn {
		position: relative;
		top: -2px;
		background: transparent;
		border: none;
	}

	.aphone .direct-chat-messages {
		height: 215px;
	}

	.intention-button .btn {
		white-space: normal;
		transition: 0.3s;
	}

	#audio_progress2 {
		-webkit-transition: width .0s ease;
		-o-transition: width .0s ease;
		transition: width .0s ease;
	}

	.faq-bottom {}

	.branch {
		height: 600px;
		display: box;
		/* OLD - Android 4.4- */
		display: -webkit-box;
		/* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;
		/* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;
		/* TWEENER - IE 10 */
		display: -webkit-flex;
		/* NEW - Chrome */
		display: flex;
		/* NEW, Spec - Opera 12.1, Firefox 20+ */
		-webkit-flex-direction: column;
		-moz-flex-direction: column;
		-ms-flex-direction: column;
		-o-flex-direction: column;
		flex-direction: column;
		-webkit-justify-content: space-between;
		-moz-justify-content: space-between;
		-ms-justify-content: space-between;
		-o-justify-content: space-between;
		justify-content: space-between;
	}

	.phone-head .btn {
		padding: 6px 4px;
	}

	.phone-info {
		background: #eff1f7;
		border-radius: 3px;
		padding: 10px;
		margin-bottom: 10px;
	}

	.box {
		border-top: none;
		box-shadow: none;
	}

	.audio-text-list {
		background: #eff1f7;
	}

	.message-face {
		padding-left: 10px;
	}

	.a-message {
		margin-bottom: 13px;
	}
</style>

</head>
<body>
<div class="navbar-fixed-top">
    <div class="breadcrumb">
        <span>系统监控</span>/
        <span class="active">监听收藏夹</span>
        <span class="pull-right" title="刷新">
					<div class="btn-refresh" onclick="location.replace(location.href);">
						<img src="<%=basePath%>/images/refresh.png" >
					</div>
				</span>

    </div>
</div>
<div class="container-fluid">
	<div class="container-fluid-main">
    <div class="page-header" style="border:none;">
		<h3>
			<div class="">监听收藏夹 共<span class="collect-count"></span>个收藏</div>
		</h3>
		 
    </div>

    <div class="panel panel-default panel-default-sample">
        <div class="panel-body">
           
            <div class="row" id="phone-list">
            </div>
            <nav aria-label="Page navigation" class="page-nav-outer text-right" id="PageNavId"></nav>
        </div>
    </div>
	</div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="modal_call_add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:1200px;">
        <div class="modal-content" style="width:1200px;">

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="<%=basePath%>/lib/jquery/1.11.0/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootbox/bootbox.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jqgrid/5.2.1/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jqgrid/5.2.1/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/lobibox.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/messageboxes.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/notifications.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/wavesurfer.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/wavesurfer.regions.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/common.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/pageNav.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">
	var createNotify = null;
    var arr_dialog_info, call_info, curRowData;
    var waveSurferBg;
	var waveSurfer;
    var taskColor = ['#FF60AF', '#FFA042', '#FFDC35', '#A8FF24', '#009100', '#00CACA', '#0080FF', '#9393FF', '#8F4586', '#FF2D2D'];
    var taskColorIndex = 0;
    var taskObj = {};
	var lastCallId, nextCallId, call_id
	var $table = null;
	var callInfoSwitch = ${callInfoSwitch}
	
	
	
    $(function () {
        var result;
        $.ajax({
            url: "<%=basePath%>/monitor/getCollectCall.do ",
            type: "post",
            dataType: "json",
            success: function (data) {
                console.log(data)
                if (data["errorCode"] == "0") {
                    if (data.list.length == 0) {
                        myNotify("error", "", "当前没有收藏的通话");
                    } else {
                        result = data.list;
                        init();
                    }
                }
            },
            error: function (data) {
                myNotify("error", "", "向服务器发送删除请求过程中发生错误！");
            }
        });

        // initPager()
        function initPager() {
            // 分页容器初始化
            pageNavObj = new PageNavCreate("PageNavId", {
                pageCount: 30,
                currentPage: 1,
                perPageNum: 5,
            });
            pageNavObj.afterClick(pageNavCallBack);
        }

        function pageNavCallBack(clickPage) {
            console.log(clickPage)

            pageNavObj = new PageNavCreate("PageNavId", {
                pageCount: 30,
                currentPage: clickPage,
                perPageNum: 5,
            });
            pageNavObj.afterClick(pageNavCallBack);
        }

        function init() {
            $('.collect-count').html(result.length);
            console.log(result)
            $(result).each(function (index, item) {
                var dom = returnDom(item);
                var _phone = '<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 phone-col">' +
                    dom +
                    '						</div>';

                $('#phone-list').append(_phone);
                $('#phone-list').find('.aphone').eq(index).find('.pause-btn').hide();
                $('#phone-list').find('.aphone').eq(index).find('.favor-btn').hide();
            });


            $('.wave').each(function (index, item) {
                var _id = $(this).attr('id');
                var _index = index;
                var _rid = $(this).parent('.phone-main').find('.robot_id').eq(0).val();
                window[_id] = WaveSurfer.create({
                    container: '#' + _id,
                   waveColor: "#007477", //波纹
                   progressColor: "#F00",
                   hideScrollbar: false, //隐藏波纹的横坐标
                   cursorColor: "#002138",
                   height: 60,
                   responsive: true,
                   scrollParent: true,
                   maxCanvasWidth: 50000, // canvas的最大值
                   splitChannels: false,
                   interact: false,
                   barHeight: 0.8,
                   backgroundColor: "#002138"
                });

                var call_id = $(this).parent('.phone-main').find('.call_id').eq(0).val();
                $.ajax({
                    url: "<%=basePath%>/call/getCallDialogueInfo.do",
                    data: "callId=" + call_id,
                    async: true,
                    dataType: "json",
                    success: function (data) {
                        if (data["errorCode"] == "0") {
                            var _call_info;
                            var _arr_dialog_info;
                            _call_info = data["callInfo"];
                            console.log(data)
                            _arr_dialog_info = data["callDialogueInfoList"];
                            var content = "";
                            for (var i = 0; i < _arr_dialog_info.length; ++i) {
                                var dialogInfo = _arr_dialog_info[i];
                                if (dialogInfo.channel == 0) {
                                    content += "<div class='direct-chat-msg right'>" +
                                        "<div class='direct-chat-info clearfix'>" +
                                        "<span class='direct-chat-name pull-right'>用户</span>" +
                                        "<span class='direct-chat-timestamp pull-left'>" + dateFormat(dialogInfo.dialogTime) +
                                        "</span></div>" +
                                        "<img class='direct-chat-img' src='<%=basePath%>/images/user.png'><div class='direct-chat-text'>" +
                                        dialogInfo.content.replace("<", "&lt;").replace(">", "&gt;") + "</div></div>";
                                } else if (dialogInfo.channel == 1) {
                                    content += "<div class='direct-chat-msg left'>" +
                                        "<div class='direct-chat-info clearfix'>" +
                                        "<span class='direct-chat-name pull-left'>机器人</span>" +
                                        "<span class='direct-chat-timestamp pull-right'>" + dateFormat(dialogInfo.dialogTime) +
                                        "</span></div>" +
                                        "<img class='direct-chat-img' src='<%=basePath%>/images/robot.jpg'><div class='direct-chat-text'>" +
                                        dialogInfo.content.replace("<", "&lt;").replace(">", "&gt;") + "</div></div>";
                                }
                            }

                            $('.wave').eq(index).closest('.phone-main').find('.audio-text-list').html(content);
                            $('.wave').eq(index).closest('.phone-col').find('.phone-time').html(_call_info.duration + 'S');
                        }
                    },
                    error: function (data) {
                    }
                });
                window[_id].load("<%=basePath%>/call/playAudioFull.do?callId=" + call_id);
            })
        }


        $("#modal_call_dialogue_info").click(function (e) {
            if ($(this).is(e.target)) {
                if (checkContentChange()) {
                    createNotify = myNotify("warning", "", "内容已修改请先保存后再关闭页面！", createNotify);
                } else {
                    $(this).modal('hide');
                }

            }
        });


//         waveSurferBg = WaveSurfer.create({
//             container: '#waveform',
//             splitChannels: true,
//             waveColor: '#4bf3a7',
//             progressColor: 'white',
//             cursorColor: 'white',
//             height: 65
//             //            backend: 'MediaElement'
//         });

        $('body').on('hidden.bs.modal', '.modal', function () {
            $("#audio_progress").attr("aria-valuenow", 0);
            $("#audio_progress").css("width", '0%');
            $("#audio_progress").text('0%');
            $("#btnPlayPauseFullAudio").attr('disabled', true);
            waveSurfer.stop();
            waveSurfer.un('ready');
            waveSurfer.un('loading');
            $(this).removeData('bs.modal');
        });

        $("#btnPlayPauseFullAudio").click(function () {
            waveSurferBg.playPause();
        });

        /**
         * 保存人工校验结果
         */
        $("#form_manual_check").submit(function (event) {
			event.preventDefault();
            var manualCheckResult = $("#select_manual_check_result").find("option:selected").val().trim();
            if (manualCheckResult == "0") {
                createNotify = myNotify("warning", "", "请正确选择人工校验结果！", createNotify);
                return false;
            }
            var manualCheckComment = $("#txt_manual_check_comment").val().trim();
            console.log('manualCheckComment = ' + manualCheckComment)
            $.ajax({
                url: "<%=basePath%>/call/saveManualCheckResultInfo.do",
                data: function () {
                    return "callId=" + call_info.id + "&manualCheckResult=" + manualCheckResult + "&manualCheckComment=" +
                        encodeURI(manualCheckComment);
                }(),
                async: false,
                dataType: "json",
                success: function (data) {
                    if (data["errorCode"] == "0") {
                        createNotify = myNotify("success", "", "保存成功！", createNotify);
                        $("#modal_call_dialogue_info").modal('hide');
                    } else {
                        createNotify = myNotify("error", "", "保存失败！", createNotify);
                    }
                },
                error: function () {
                }
            });
        });

        $(".play_audio_frag").click(function () {
            var dialogId = $(this).attr("dialogId").trim();
            $.ajax({
                url: "<%=basePath%>/call/playAudioFrag.do",
                sync: false,
                dataType: "json",
                success: function (data) {
                    if (data["errorCode"] == "0") {
                        //                        console.info(data["object"]);
                        //                        waveSurfer.play(10.5, 15.5);
                        waveSurferBg.play(data["object"].begin, data["object"].end);

                    }
                },
                error: function (data) {

                }
            });

        });
    });

    /******************************方法声明**********************************/

//     function showCallDialogInfo(callId) {
// 		if(callInfoSwitch) {
// 			console.log(callId)
// 			$.ajax({
// 			    url: "<%=basePath%>/call/getCallDialogueInfo.do",
// 			    data: "callId=" + callId,
// 			    async: true,
// 			    dataType: "json",
// 			    success: function (data) {
// 			        if (data["errorCode"] == "0") {
// 			            call_info = data["callInfo"];
// 			            console.log(data)
// 			            arr_dialog_info = data["callDialogueInfoList"];
// 			            showDialogInfo(callId);
// 			        }
// 			    },
// 			    error: function (data) {
// 			    }
// 			});
// 		}
//     }
	
	function showCallDialogInfo(callId) {
		if(callInfoSwitch) {
			call_id = callId
			$("#myModal").modal({
				backdrop: 'static',     // 点击空白不关
				keyboard: false,        // 按键盘esc也不会关闭
				remote: '<%=basePath %>/call/showCallDialog.do?call_id=' + call_id
			})
		}
	}

    /**
     *
     * @returns {boolean} true： 内容有改 false：内容没改
     */
    function checkContentChange() {
        var mcResult = $("#select_manual_check_result").find("option:selected").val().trim();
        var mcComment = $("#txt_manual_check_comment").val().trim();
        return call_info.manualCheckResult != mcResult ||
            (call_info.manualCheckComment != null && call_info.manualCheckComment != mcComment) ||
            (call_info.manualCheckComment == null && mcComment != "");
    }

    function showDialogInfo(callId) {
        waveSurfer.on("ready", function () {
            $("#audio_progress").attr("aria-valuenow", 100);
            $("#audio_progress").css("width", '100%');
            $("#audio_progress").text('100%');
            $("#btnPlayPauseFullAudio").removeAttr('disabled');
            waveSurfer.play();
        });
        waveSurfer.on('loading', function (progress) {
            $("#audio_progress").attr("aria-valuenow", progress);
            $("#audio_progress").css("width", progress + '%');
            $("#audio_progress").text(progress + '%');
        });
        waveSurfer.load("<%=basePath%>/call/playAudioFull.do?callId=" + call_info.id);
        //获取call具体信息
        $.ajax({
            url: "<%=basePath%>/monitor/getCallInfo.do",
            data: "callId=" + callId,
            async: false,
            dataType: "json",
            success: function (data) {
                console.log(data)
                $("#div_call_number").text("外呼号码：" + data.list[0].phoneNumber);
                $("#div_template_code").text("业务模板：" + data.list[0].templateName);
                $("#div_answer_time").text("接听时间：" + data.list[0].answerTime);
                $("#div_task_name").text("外呼任务：" + data.list[0].taskName);
                $("#div_result").html("通话结果：" + data.list[0].callResult);
            },
            error: function (data) {
            }
        });
        //        $("#select_manual_check_result option[value='" + call_info.manualCheckResult + "']").prop("selected", true);
        //        $("#txt_manual_check_comment").val(call_info.manualCheckComment);
        var content = "";
        for (var i = 0; i < arr_dialog_info.length; ++i) {
            var dialogInfo = arr_dialog_info[i];
            if (dialogInfo.channel == 0) {
                content += "<div class='direct-chat-msg right'>" +
                    "<div class='direct-chat-info clearfix'>" +
                    "<span class='direct-chat-name pull-right'>用户</span>" +
                    "<span class='direct-chat-timestamp pull-left'>" + dateFormat(dialogInfo.dialogTime) + "</span></div>" +
                    "<img class='direct-chat-img' src='<%=basePath%>/images/user.png'><div class='direct-chat-text'>" +
                    dialogInfo.content.replace("<", "&lt;").replace(">", "&gt;") + "</div></div>";
            } else if (dialogInfo.channel == 1) {
                content += "<div class='direct-chat-msg left'>" +
                    "<div class='direct-chat-info clearfix'>" +
                    "<span class='direct-chat-name pull-left'>机器人</span>" +
                    "<span class='direct-chat-timestamp pull-right'>" + dateFormat(dialogInfo.dialogTime) + "</span></div>" +
                    "<img class='direct-chat-img' src='<%=basePath%>/images/robot.jpg'><div class='direct-chat-text'>" +
                    dialogInfo.content.replace("<", "&lt;").replace(">", "&gt;") + "</div></div>";
            }
        }
        $("#dialog_info").html(content);
        $("#modal_call_dialogue_info").modal({
            backdrop: false,
        });
    }

    function returnDom(item) {
        var borderBtmColor;
        if (taskObj[item.business_id]) {
            borderBtmColor = taskObj[item.business_id];
        } else {
            taskObj[item.business_id] = taskColor[taskColorIndex];
            taskColorIndex++;
            if (taskColorIndex == 9) {
                taskColorIndex = 0;
            }
            borderBtmColor = taskObj[item.business_id];
        }
        console.log(borderBtmColor)
        var dom = '<div style="border-bottom-color:' + borderBtmColor + '" class="aphone" id="Listenr' + item.robot_id + '" onclick="showCallDialogInfo(' + item.call_id + ')">' +
            '								<div class="task-end"></div>' +
            '								<div class="phone-head text-right">' +
           '                                <button type="button" class="btn btn-default pause-btn" aria-label="Left Align" target="wave' +
           item.robot_id + '">' +
           // '					<span class="glyphicon glyphicon-pause" aria-hidden="true"></span>' +
           '                 <img src="<%=basePath%>/images/monitor/pause.png" >'+
           '				</button>' ;


           if (callInfoSwitch) {
               dom = dom + '				<button type="button" class="btn btn-default play-btn" aria-label="Left Align"   target="wave' +
                   item.robot_id + '">' +
                   '                 <img src="<%=basePath%>/images/monitor/play.png" >';
           }



           dom = dom + '				</button>' +
           '				<button type="button" class="btn btn-default unfavor-btn" aria-label="Left Align" onclick="toggleFavor(0,' +
           item.call_id + ',this);">' +
           // '					<span class="glyphicon glyphicon-star" aria-hidden="true"></span>' +
           '                 <img src="<%=basePath%>/images/monitor/unfavor.png" >'+
           '				</button>' +
           '				<button type="button" class="btn btn-default favor-btn" aria-label="Left Align" onclick="toggleFavor(1,' +
           item.call_id + ',this);">' +
           // '					<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>' +
           '                 <img src="<%=basePath%>/images/monitor/favor.png" >'+
           '				</button>' +
           // 					'									<button onclick="playThis(this)" target="wave' + item.robot_id + '">播放</button>' +
           // 						'									<button>收藏</button>' +
           '									<span class="phone-time">' + item.time + 'S</span>' +
           '								</div>' +
            '								<div class="phone-main">' +
						'							<div class="phone-info">' +
			'								<div class="row">' +

			// '									<div class="col-xs-4" style="padding-right: 0px">外呼任务：'+item.task_name+'</div>' +
			'									<div class="col-xs-4" style="padding-right: 0px">所属业务：'+item.business_name+'</div>' +
			'									<div class="col-xs-4" style="padding-right: 0px">电话号码：'+item.phone_number+'</div>' +

			// '									<div class="col-xs-4" style="padding-right: 0px">外呼时间：'+item.call_time+'</div>' +
			'								</div>' +
			'							</div>' +
            // '							<input type="text" class="htext task_name" name="task_name" value="' + item.task_name + '">' +
            '							<input type="text" class="htext business_name" name="business_name" value="' + item.business_name +
            '">' +
            '							<input type="text" class="htext robot_id" name="robot_id" value="' + item.robot_id + '">' +
            '							<input type="text" class="htext call_time" name="call_time" value="' + item.call_time + '">' +
            // '							<input type="text" class="htext task_id" name="task_id" value="' + item.task_id + '">' +
            '							<input type="text" class="htext time" name="time" value="' + item.time + '">' +
            '							<input type="text" class="htext business_id" name="business_id" value="' + item.business_id + '">' +
            '							<input type="text" class="htext call_id" name="call_id" value="' + item.call_id + '">' +
            '									<div id="wave' + item.call_id + '" class="wave" style="width: 476px;height: 60px"></div>' +
//             '																		<div style="margin-top: 15px" class="smaller-div">' +
//             '									<form class="form-horizontal" >' +
//             '										<div class="form-group">' +
//             '											<label class="control-label col-xs-2" for="">人工校验</label>' +
//             '											<div class="col-xs-2">' +
//             '												<select class="form-control input-sm" id=""  disabled>' +
//             '													<option value="0">-请选择-</option>' +
//             '							' +
//             '													<option value="0">默认</option>' +
//             '							' +
//             '													<option value="1">成功</option>' +
//             '							' +
//             '													<option value="2">失败</option>' +
//             '							' +
//             '													<option value="3">有意向</option>' +
//             '							' +
//             '													<option value="4">无结果</option>' +
//             '							' +
//             '													<option value="5">兜底</option>' +
//             '							' +
//             '													<option value="6">随销</option>' +
//             '							' +
//             '													<option value="20">疑似办理</option>' +
//             '							' +
//             '													<option value="21">强制办理</option>' +
//             '							' +
//             '												</select>' +
//             '											</div>' +
//             '							' +
//             '											<label class="control-label col-xs-1" for="">备注</label>' +
//             '											<div class="col-xs-5">' +
//             '												<textarea id="" readonly class="form-control input-sm" maxlength="80" placeholder="最多填写80个字..."></textarea>' +
//             '											</div>' +
//             '											<div class="col-xs-1">' +
//             '												<button type="button" class="btn btn-primary btn-sm" value="保存" onclick="clear()" disabled>保存</button>' +
//             '											</div>' +
//             '										</div>' +
//             '									</form>' +
//             '								</div>' +
            '							' +
            '							' +
            '							' +
            '								<div class="box box-primary direct-chat direct-chat-primary smaller-div">' +
            '									<div class="box box-primary direct-chat direct-chat-primary">' +
            '										<div class="direct-chat-messages audio-text-list" id="">' +
            // 						'											<div class="a-message robot-message">' +
            // 						'												<div class="text-left">' +
            // 						'													机器人' +
            // 						'												</div>' +
            // 						'												<div class="row">' +
            // 						'													<div class="col-xs-1 message-face">' +
            // 						'														<img src="" alt="">' +
            // 						'													</div>' +
            // 						'													<div class="col-xs-10 message-text">' +
            // 						'														你好，却玩的精神可嘉到拉萨的考拉涉及到卡萨萝莉控的进口量' +
            // 						'													</div>' +
            // 						'												</div>' +
            // 						'											</div>' +
            // 						'											<div class="a-message user-message">' +
            // 						'												<div class="text-right">' +
            // 						'													用户' +
            // 						'												</div>' +
            // 						'												<div class="row">' +
            // 						'													<div class="col-xs-1">' +
            // 						'													</div>' +
            // 						'													<div class="col-xs-10 message-text">' +
            // 						'														你好，却玩的精神可嘉到拉萨的考拉涉及到卡萨萝莉控的进口量' +
            // 						'													</div>' +
            // 						'													<div class="col-xs-1 message-face">' +
            // 						'														<img src="" alt="">' +
            // 						'													</div>' +
            // 						'												</div>' +
            // 						'											</div>' +
            '										</div>' +
            '									</div>' +
            '								</div>' +

            '								</div>' +

            '							</div>'
        return dom;
    }

    function toggleFavor(status, callId, obj, e) {
		e = e || window.event;
	　　if (e.stopPropagation()) { //W3C阻止冒泡方法 e.stopPropagation();
	　　} else {
	　　　　e.cancelBubble = true; //IE阻止冒泡方法
	　　}
        $.ajax({
            url: "<%=basePath%>/monitor/collectCall.do ",
            type: "post",
            dataType: "json",
            async: false,
            data: {
                callId: callId,
                isCollect: status
            },
            success: function (data) {
                if (data["errorCode"] == "0") {
                    $(obj).hide();
                    if (status == 0) {
                        window.location.reload();
                    } else {
                        $(obj).parent().find('.unfavor-btn').show();
                    }
                }
            },
            error: function (data) {
                myNotify("error", "", "向服务器发送删除请求过程中发生错误！");
            }
        });
    }
	
	// 获取筛选数据
	function getJQGridFilterData() {
	    var postData = {};
	   
	    return postData;
	}
</script>
</body>
</html>